import { Link } from 'react-router-dom';

const ulStyle = {
  'list-style-type': 'none',
  margin: 0,
  padding: 0,
};

const liStyle = {
  display: 'inline-block',
  margin: '0 10px',
};

const headerStyle = {
  display: 'display',
  padding: '10px 0',
  backgroundColor: '#f6f6f6',
  borderBottom: '1px solid #ddd',
};

const Navigation = () => (
  <header style={headerStyle}>
    <nav>
      <ul style={ulStyle}>
        <li style={liStyle}>
          <Link to="/">Home</Link>
        </li>
        <li style={liStyle}>
          <Link to="/echarts">Echarts</Link>
        </li>
        <li style={liStyle}>
          <Link to="/gridlayout">Layout</Link>
        </li>
        <li style={liStyle}>
          <Link to="/mobx/MobxWithStore">Mobx</Link>
        </li>
        <li style={liStyle}>
          <Link to="/loadControl">loadControl</Link>
        </li>
        <li style={liStyle}>
          <Link to="/components">components</Link>
        </li>
        <li style={liStyle}>
          <Link to="/mst">MST</Link>
        </li>
        <li style={liStyle}>
          <Link to="/ReduxDemo/x">ReduxDemo</Link>
        </li>
        <li style={liStyle}>
          <Link to="/rbd">RBD</Link>
        </li>
        <li style={liStyle}>
          <Link to="/scale">scale</Link>
        </li>
        <li style={liStyle}>
          <Link to="/pattern">pattern</Link>
        </li>
        <li style={liStyle}>
          <Link to="/m">M</Link>
        </li>
      </ul>
    </nav>
  </header>
);

export default Navigation;
